<template>
  <div class="aps-container">
    <div class="aps-title">
      <!-- <img src="../../assets/images/title.png" class="title-img" alt=""> -->
      自适应屏幕看板
      <!-- <screenfull isContainer class="screenfull" /> -->
    </div>
    <div class="aps-middle">
      <div class="aps-middle-fl" @click="onClickSelectOrder">
        <!-- <vueSeamlessScroll class="aps-fl-box" :data="listData" :class-option="classOption"
          style="height: 100%;"> -->
        <div class="aps-fl-box">
          <div class="aps-fl-demo" v-for="(item, index) in listData" :key="index"
            :data-index="index" :class="{active: orderVal == index}">
            <div class="aps-fl-demo-title"><img src="../../assets/images/run.png" alt="" class="img"
                v-if="item.status == 1"><img src="../../assets/images/await.png" alt="" class="img"
                v-else>
              <p :class="{green: item.status == 1}">{{ item.oId }}</p>
            </div>
            <div style="display: flex;height: 119px;">
              <div class="aps-fl-demo-fl">
                <ul class="ul">
                  <li class="li">
                    <p class="p">工单用时： </p>{{ item.time }}
                  </li>
                  <li class="li">
                    <p class="p">开工时间： </p>{{ item.startTime }}
                  </li>
                  <li class="li">
                    <p class="p">预计完成时间： </p>{{ item.finishTime }}
                  </li>
                </ul>
              </div>
              <div class="aps-fl-demo-fr">
                <span v-if="item.status == 1" style="color: #21C87F;">{{ item.num }}</span>
                <span v-else>{{ item.num }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- </vueSeamlessScroll> -->
      </div>
      <div class="aps-middle-fr">
        <div class="aps-fr-top">
          <div class="one">
            <div id="myEcharts1" style="width: 100%; height:100%"></div>
          </div>
          <div class="two">
            <div id="myEcharts2" style="width: 100%; height:100%"></div>
          </div>
        </div>
        <div class="aps-fr-bottom">
          <div class="title">工单编号： TSHQ900187</div>
          <div id="myEcharts3" style="width: 100%; height:85%"></div>
        </div>
        <div class="operation-button">
          <button class="button"><img src="../../assets/images/icon1.png" alt="" class="img" />
            详情</button>
          <button class="button"><img src="../../assets/images/icon2.png" alt=""
              class="img" />工艺路线</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import '@/utils/myFlexible';
// import vueSeamlessScroll from 'vue-seamless-scroll';
import * as Echarts from 'echarts';
export default {
  name: 'aps',
  components: {
    // vueSeamlessScroll,
  },
  data() {
    return {
      orderVal: -1,
      liHeight: 120,
      listData: [
        {
          oId: 'TSHQ900187',
          time: '4:00',
          startTime: '2023-05-29 8:00',
          finishTime: '2023-05-29 12:00',
          num: 5,
          status: 1,
        },
        {
          oId: 'TSHQ900187',
          time: '4:00',
          startTime: '2023-05-29 8:00',
          finishTime: '2023-05-29 12:00',
          num: 4,
          status: 0,
        },
        {
          oId: 'TSHQ900187',
          time: '4:00',
          startTime: '2023-05-29 8:00',
          finishTime: '2023-05-29 12:00',
          num: 3,
          status: 0,
        },
        {
          oId: 'TSHQ900187',
          time: '4:00',
          startTime: '2023-05-29 8:00',
          finishTime: '2023-05-29 12:00',
          num: 2,
          status: 0,
        },
        {
          oId: 'TSHQ900187',
          time: '4:00',
          startTime: '2023-05-29 8:00',
          finishTime: '2023-05-29 12:00',
          num: 1,
          status: 0,
        },
      ],
    };
  },
  mounted() {
    this.initData();
  },
  computed: {
    classOption() {
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: this.liHeight, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  methods: {
    onClickSelectOrder(e) {
      // 复制项可以点击但是不能高亮
      const item = e.target.closest('.aps-fl-demo');
      if (item) {
        const { index } = item.dataset;
        // this.orderVal = this.listData[index];
        this.orderVal = index;
      }
    },
    initData() {
      var myEcharts1 = Echarts.init(document.getElementById('myEcharts1'));
      var myEcharts2 = Echarts.init(document.getElementById('myEcharts2'));
      var myEcharts3 = Echarts.init(document.getElementById('myEcharts3'));
      var bgImg =
        '';

      myEcharts1.setOption({
        grid: {
          top: '20%',
          left: '5%',
          right: '6%',
          bottom: '15%',
        },
        xAxis: [
          {
            name: '单位(时)',
            nameTextStyle: {
              color: '#fff',
              padding: [30, 0, 0, 4], // 可以自行调整padding值
            },
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#113268',
              },
            },
            axisLabel: {
              color: '#fff',
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: [
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
            ],
          },
        ],

        yAxis: [
          {
            name: '当前进度(%)',
            nameTextStyle: {
              color: '#fff',
              padding: [0, 0, 0, -30], // 可以自行调整padding值
            },
            type: 'value',
            min: 0,
            max: 100,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(17, 50, 104,0.5)',
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: '#fff',
              },
              formatter: function (params) {
                return params + '%';
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            hoverAnimation: false,
            name: '',
            type: 'line',
            smooth: false, //是否平滑
            showAllSymbol: false,
            symbol: 'circle',
            symbolSize: 6,
            emphasis: {
              itemStyle: {
                borderColor: '#0388cb',
                borderWidth: 2,
              },
            },
            lineStyle: {
              normal: {
                color: '#0388cb',
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            itemStyle: {
              color: '#0388cb',
              borderColor: '#0388cb',
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, .3)',
              shadowBlur: 0,
              shadowOffsetY: 112,
              shadowOffsetX: 1112,
            },
            data: [0, 20, 40],
          },
        ],
      });

      myEcharts2.setOption({
        grid: {
          left: '2%',
          right: '2%',
          bottom: '2%',
          top: '5%',
          containLabel: true,
        },
        xAxis: {
          show: false,
          type: 'value',
          max: 20,
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: '12',
                color: '#fff',
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: ['当前班次生产进度：'],
          },
        ],
        series: [
          {
            name: 'bg',
            type: 'pictorialBar',
            barWidth: '20',
            silent: true,
            barCategoryGap: 20,
            symbol: 'image://' + bgImg,
            symbolClip: false,
            symbolBoundingData: 20,
            symbolSize: ['100%', '100%'],
            label: {
              show: true,
              position: 'insideRight',
              distance: 15,
              textStyle: { color: '#fff' },
            },
            data: [20],
          },
          {
            type: 'bar',
            showBackground: false,
            label: {
              show: true,
              position: 'insideRight',
              distance: 15,
              textStyle: { color: '#fff' },
            },
            barGap: '-10%',
            itemStyle: {
              normal: {
                color: new Echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: 'rgba(10, 64, 138, 0.8)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(10, 64, 138, 0.4)',
                  },
                ]),
              },
            },
            barWidth: 20,
            data: [10],
          },
        ],
      });

      myEcharts3.setOption({
        color: ['#009bf6', '#8d7dfc', '#dcae4c', '#7ddd6a', '#22e1d9'],
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          top: '15%',
          containLabel: true,
        },
        legend: {
          textStyle: {
            color: '#fff',
          },
          itemGap: 25,
          data: ['收卷', '验布', '分切', '包装', '入库'],
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff',
            fontSize: 13,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          data: [
            '母卷1',
            '母卷2',
            '母卷3',
            '母卷4',
            '母卷5',
            '母卷6',
            '母卷7',
            '母卷8',
            '母卷9',
            '母卷10',
            '母卷11',
            '母卷12',
          ],
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(17, 50, 104,0.5)',
            },
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: '收卷',
            type: 'bar',
            barWidth: 20,
            stack: 'total',
            z: 3,
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          },
          {
            name: '验布',
            type: 'bar',
            barWidth: 20,
            stack: 'total',
            z: 3,
            data: [0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1],
          },
          {
            name: '分切',
            type: 'bar',
            barWidth: 20,
            stack: 'total',
            z: 3,
            data: [0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1],
          },
          {
            name: '包装',
            type: 'bar',
            barWidth: 20,
            stack: 'total',
            z: 3,
            data: [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1],
          },
          {
            name: '入库',
            type: 'bar',
            barWidth: 20,
            stack: 'total',
            z: 3,
            data: [0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1],
          },
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: { color: 'rgba(0, 151, 243, 0.1)' },
            data: [1, 1, 1, 1, 1, 1],
            z: 2,
          },
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: { color: 'rgba(143, 127, 252, 0.1)' },
            data: [2, 2, 2, 2, 2, 2],
            z: 1,
          },
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: { color: 'rgba(0, 151, 243, 0.1)' },
            data: [3, 3, 3, 3, 3, 3],
            z: 0,
          },
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: { color: 'rgba(129, 223, 107, 0.1)' },
            data: [4, 4, 4, 4, 4, 4],
            z: -1,
          },
          {
            type: 'bar',
            barWidth: 20,
            barGap: '-100%',
            itemStyle: { color: 'rgba(34, 226, 218, 0.1)' },
            data: [5, 5, 5, 5, 5, 5],
            z: -2,
          },
        ],
      });
      // 1
      let myEcharts1_1 = document.getElementById('myEcharts1');
      let mymyEcharts1_1 = Echarts.init(myEcharts1_1);
      const chartsObserver = new ResizeObserver(() => {
        if (myEcharts1_1) mymyEcharts1_1.resize();
      });
      chartsObserver.observe(myEcharts1_1);

      // 2
      let myEcharts2_2 = document.getElementById('myEcharts2');
      let mymyEcharts2_2 = Echarts.init(myEcharts2_2);
      const chartsObserver2 = new ResizeObserver(() => {
        if (myEcharts2_2) mymyEcharts2_2.resize();
      });
      chartsObserver2.observe(myEcharts2_2);

      // 2
      let myEcharts3_3 = document.getElementById('myEcharts3');
      let mymyEcharts3_3 = Echarts.init(myEcharts3_3);
      const chartsObserver3 = new ResizeObserver(() => {
        if (myEcharts3_3) mymyEcharts3_3.resize();
      });
      chartsObserver3.observe(myEcharts3_3);
    },
  },
};
</script>

<style lang="scss">
@import url('./index.scss');
</style>